<template>
  <div class="app-container">
    <div style="padding-bottom: 20px; text-align: right">
      <el-button size="mini" @click="openDialog">添加活动</el-button>
    </div>
    <div style="position: relative;">
      <el-tabs v-model="activeName" type="card" @tab-click="tabChange">
        <el-tab-pane :label="item.activityName" :name="String(index + 1)" v-for="(item, index) in activityNameList" :key="index">
        </el-tab-pane>
      </el-tabs>
      
      <el-table :data="tableData1" style="width: 100%">
        <el-table-column prop="activityName" label="活动名称"></el-table-column>
        <el-table-column prop="activityType" label="活动类型"></el-table-column>
        <el-table-column prop="activityCurrency" label="活动币种"></el-table-column>
        <el-table-column prop="returnRate" label="返佣比例"></el-table-column>
        <el-table-column prop="activityPairs" label="活动交易对"></el-table-column>
        <el-table-column prop="activityTotalAmount" label="活动总量"></el-table-column>
        <el-table-column prop="releaseCycle" label="发放周期"></el-table-column>
        <el-table-column prop="startTime" label="开始时间">
          <template slot-scope="scope">
            <span>{{parseTime(scope.row.startTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间">
          <template slot-scope="scope">
            <span>{{parseTime(scope.row.endTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dataFlag" label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.dataFlag === "Y"  ? "启用" : "不启用"}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 1)" type="text" size="small">终止</el-button>
            <el-button @click="handleClick(scope.row, 2)" type="text" size="small">详情</el-button>
            <el-button @click="handleClick(scope.row, 3)" type="text" size="small">编辑</el-button>
            <el-button @click="handleClick(scope.row, 4)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNumber" :limit.sync="queryParams.pageSize" @pagination="getList" />
      
    </div>

    
    <!-- 添加活动 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
      <el-form ref="addForm" :model="dialogForm" :rules="rules" label-width="100px" inline size="small">
        <el-form-item label="活动类型" prop="activityType"><el-input v-model="dialogForm.activityType" style="width: 180px;"></el-input></el-form-item>
        <!-- <el-form-item label="奖励类型" prop="rewardType"><el-input v-model="dialogForm.rewardType" style="width: 180px;"></el-input></el-form-item> -->
        <el-form-item label="活动名称" prop="activityName"><el-input v-model="dialogForm.activityName" style="width: 180px;"></el-input></el-form-item>
        <el-form-item label="活动交易对" prop="activityPairs"><el-input v-model="dialogForm.activityPairs" style="width: 180px;"></el-input></el-form-item>
        <el-form-item label="活动奖励币种" prop="activityCurrency"><el-input v-model="dialogForm.activityCurrency" style="width: 180px;"></el-input></el-form-item>
        <el-form-item label="活动总数" prop="activityTotalAmount"><el-input v-model="dialogForm.activityTotalAmount" style="width: 180px;"></el-input></el-form-item>
        <el-form-item label="返佣比例%" prop="returnRate"><el-input v-model="dialogForm.returnRate" style="width: 180px;"></el-input></el-form-item>
        <el-form-item label="发放周期" prop="releaseCycle"><el-input v-model="dialogForm.releaseCycle" style="width: 180px;"></el-input></el-form-item>
        <el-form-item label="活动时间" prop="times">
          <el-date-picker
            v-model="dialogForm.times"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="谷歌验证码" prop="code"><el-input v-model="dialogForm.code" style="width: 180px;"></el-input></el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, deleteactiveity, findByname } from '@/api/activity/activity';
export default {
  data() {
    return {
      // tab
      activeName: '1',
      // 弹框是否显示
      dialogVisible: false,
      // 弹框表单数据
      dialogForm: {
      },
      // 验证规则
      rules: {
        activityType: [{ required: true, message: '请填写活动类型', trigger: 'blur' }],
        // rewardType: [{ required: true, message: '请填写奖励类型', trigger: 'blur' }],
        activityName: [{ required: true, message: '请填写活动名称', trigger: 'blur' }],
        activityPairs: [{ required: true, message: '请填写活动交易对', trigger: 'blur' }],
        activityCurrency: [{ required: true, message: '请填写活动奖励币种', trigger: 'blur' }],
        activityTotalAmount: [{ required: true, message: '请填写活动总数', trigger: 'blur' }],
        returnRate: [{ required: true, message: '请填写返佣比例%', trigger: 'blur' }],
        releaseCycle: [{ required: true, message: '请填写发放周期', trigger: 'blur' }],
        times: [{ required: true, message: '请填写活动时间', trigger: 'blur' }],
        code: [{ required: true, message: '请填写谷歌验证码', trigger: 'blur' }],
      },
      // 列表数据
      tableData1: [
      ],
      title: '添加活动',
      // 是否编辑
      isEdit: false,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: { pageNumber: 1, pageSize: 20, activityName: "" },
      // 活动名称列表
      activityNameList: []
    };
  },
  created() {
    this.getActivityName()
  },
  methods: {
    // 获取活动名称
    getActivityName() {
      findByname({}).then(res => {
        const list = res.result
        this.activityNameList = list
        if (list.length) {
          this.queryParams.activityName = list[0].activityName
          this.getList();
        }
      })
    },
    // 切换tab
    tabChange(val) {
      const index = Number(this.activeName) - 1
      const item = this.activityNameList[index]
      this.queryParams.activityName = item.activityName
      this.queryParams.pageNumber = 1
      this.getList()
    },
    // 操作栏
    handleClick(item, type) {
      if (type === 1) {
        // 终止操作
        this.$confirm('确认终止活动?')
          .then(_ => {
            const data = {
              ...item,
              dataFlag: "N",
              updateBy: this.$store.getters.accountId
            }
            update(data).then(res => {
              this.dialogVisible = false;
              this.getActivityName()
              this.$message({ type: 'success', message: res.message || '操作成功' });
              done();
            })
          })
          .catch(_ => {});
      } else if (type === 2) {
        // 详情
        if (item.activityName === "注册邀请返佣") {
          this.$router.push({path: "/activity/invite", query: {item: JSON.stringify(item)}})
        } else {
          this.$router.push({path: "/activity/reg_detail", query: {item: JSON.stringify(item)}})
        }
      } else if (type === 3) {
        // 编辑
        this.dialogForm = {}
        this.dialogForm = item
        this.isEdit = true;
        this.title = '编辑活动';
        this.dialogVisible = true;
      } else {
        // 删除
        this.del(item)
      }
    },
    openDialog() {
      this.dialogForm = {}
      this.title = '添加活动';
      this.dialogVisible = true;
      this.isEdit = false;
    },
    // 查询列表
    getList() {
      list({
        ...this.queryParams
      }).then(res => {
        this.tableData1 = res.result.list
        this.total = res.result.total
      })
    },
    // 添加编辑活动
    confirm() {
      console.log(this.dialogForm, "dialogForm")
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          if (this.isEdit) {
            const data = {...this.dialogForm}
            data.startTime = new Date(data.times[0]).getTime()
            data.endTime = new Date(data.times[1]).getTime()
            delete data.times
            update(data).then(res => {
              this.dialogVisible = false;
              this.getActivityName()
              this.$message({ type: 'success', message: res.message || '添加成功' });
            })
          } else {
            const data = {...this.dialogForm}
            data.startTime = new Date(data.times[0]).getTime()
            data.endTime = new Date(data.times[1]).getTime()
            delete data.times
            add(data).then(res => {
              this.dialogVisible = false;
              this.getActivityName()
              this.$message({ type: 'success', message: res.message || '编辑成功' });
            })
          }
        } else {
          console.log("error")
          return 
        }
      })
    },
    // 删除活动
    del(data) {
      deleteactiveity({
        id: data.id
      }).then(res => {
        this.getActivityName()
        this.activeName = "1"
        this.$message({ type: 'success', message: res.message || '操作成功' });
      })
    }
  }
};
</script>

<style></style>
